<template>
	<view class="base">
		<view class="base_nav a-c" :style="{paddingTop:searchBarTop + 'px',backgroundColor: backgroundColor,}">
			<view class="a-c" @click="back">
				<image v-if="opacityNum" src="/static/back-black.png" mode="widthFix" class="back-icon"
					:style="{opacity: opacityNum}" />
				<image v-else src="/static/back.png" mode="widthFix" class="back-icon" />
			</view>
			<view class="t-c col-black" v-if="opacityNum" :style="{opacity: opacityNum}">基地</view>
			<view class="t-c col-white" v-else>基地</view>
		</view>

		<view class="base_swiper">
			<swiper class="icon-600" @change="checkBanner">
				<swiper-item v-for="(v,i) in swiperList" :key="i">
					<image :src="v" mode="aspectFill" class="icon-600" :style="{backgroundColor: v}" />
				</swiper-item>
			</swiper>
			<view class="base_swiper_page">{{ `${swiperList.length? current+1 : 0}/${swiperList.length}` }}</view>
		</view>

		<view class="base_info">
			<view class="base_info_name fw-b">{{ detail.title || '暂无' }}</view>
			<view>{{ detail.keyword || '' }}</view>
			<view class="flex a-c wrap">
				<view v-for="(v,i) in detail.labelList" :key="i" class="tag">{{ v }}</view>
			</view>
			<view class="flex a-c">
				<view class="">{{ `地址：${ detail.address || '暂未更新地址' }` }}</view>
				<image src="/static/home/home-locate.png" mode="widthFix" class="icon-18" />
			</view>
		</view>

		<view class="base_detail box">
			<view class="base_detail_tab between a-c">
				<view v-for="(v,i) in navList" :key="i" class="t-c" @click="pageScroll(v.type)">
					<view :class="navIndex === i?'nav-act fw-b':''">{{ v.name }}</view>
					<image v-if="navIndex === i" src="./static/b.png" mode="widthFix" class="icon-act" />
				</view>
			</view>
			<view class="">
				<rich-text :nodes="nodes"></rich-text>
			</view>
		</view>

		<view class="box">
			<view class="home-title fw-b" id="courses">特色课程</view>
			<view class="base_class flex a-c" v-for="(item,index) in classList" :key="index">
				<view class="f1 flex">
					<image :src="item.cover" mode="aspectFill" class="base_class_img" />
					<view class="f1">
						<view class="base_class_name fw-b">{{ item.title }}</view>
						<view class="base_class_info">{{ item.introduce }}</view>
						<view class="flex a-c wrap">
							<view v-for="(v,i) in item.labelList" :key="i" class="tag">{{ v }}</view>
						</view>
					</view>
				</view>
				<button class="base_class_btn" @click="$to(`/pages/index/class_detail?id=${item.id}`)">课程详情</button>
			</view>
		</view>

		<view class="box">
			<view class="home-title fw-b" id="demeanour">研学风采</view>
			<view class="between a-c mb-30">
				<image :src="v" mode="aspectFill" class="icon-340" v-for="(v,i) in demeanourList" :key="i" @click="previewimage(i)" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				searchBarTop: 0, //搜索栏的外边框高度，单位px
				opacityNum: 0,
				id: '',
				current: 0,
				swiperList: ['#8ee7bf', '#75a5de', '#33cc6b', '#e8696b'],
				detail: null,
				navList: [{
						name: '基地介绍',
						type: 1,
					},
					{
						name: '特色课程',
						type: 'courses',
					},
					{
						name: '研学风采',
						type: 'demeanour',
					}
				],
				navIndex: 0,
				color: '#FFF',
				nodes: '',
				classList: [],
				demeanourList: [],


			}
		},
		onLoad(e) {
			this.getSystem();
			this.id = e.id;
			
		},
		onShow() {
			this.getInfo();
		},
		methods: {
			getSystem() {
				uni.getSystemInfo({
					success: (e) => {
						this.searchBarTop = e.statusBarHeight;
					}
				})
			},
			checkBanner({ detail }) {
				this.current = detail.current;
			},
			async getInfo() {
				const res = await this.$api.get('ebBase/details', {
					id: this.id
				});
				if (res.code == 200) {
					if (res.data.label) {
						res.data.labelList = res.data.label.split(',')
					} else {
						res.data.labelList = []
					}
					if (res.data.picture) {
						this.swiperList = res.data.picture.split(',')
					} else {
						this.swiperList = []
					}
					if (res.data.picture) {
						this.demeanourList = res.data.demeanour.split(',')
					} else {
						this.demeanourList = []
					}
					if (res.data.ebCourses) {
						res.data.ebCourses.forEach(v => {
							if (v.label) {
								v.labelList = v.label.split(',')
							} else {
								v.labelList = []
							}
						})
					}
					if (res.data.introduce) {
						var str = res.data.introduce;
						// str = str.replace(/http:\/\/ydjxb.dgqmkj.site:8082\/http:\/\/ydjxb.dgqmkj.site:8082/g, 'http://ydjxb.dgqmkj.site:8082');
						str = str.replace(/wscnph/g, 'wscnph maxImg');
						str = str.replace(/<img/g, '<img style="max-width:100% !important;height:auto;"');
						this.nodes = str;
					}
					
					this.detail = res.data;
					this.classList = res.data.ebCourses;
				}
			},
			pageScroll(to) {
				if(to == 1) return false;
				var that = this;
				uni.createSelectorQuery().select('#' + to).boundingClientRect(function(rect) {
					var scrollTop = rect.top + that.searchBarTop + 44
					uni.pageScrollTo({
						scrollTop,
						duration: 500
					})
				}).exec();
			},
			previewimage(current) {
				uni.previewImage({
					urls: this.demeanourList,
					current
				})
			},

		},
		onPageScroll(res) { //获取距离顶部距离
			const scrollTop = res.scrollTop;
			if (scrollTop >= 0) {
				// 导航条颜色透明渐变
				if (scrollTop <= 20) {
					this.opacityNum = 0;
				} else if (20 < scrollTop && scrollTop <= 300) {
					this.opacityNum = scrollTop / 300;
				} else if (scrollTop > 300) {
					this.opacityNum = 1
				}
			}
		},
		computed: {
			backgroundColor() {
				return `rgba(255,255,255,${this.opacityNum})`
			},
		},
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>

<style lang="scss" scoped>
	p {
		text-indent: 2em;
	}
	.maxImg {
		width: 100%;
		max-width:100% !important;
		height:auto;
	}
	.box {
		padding: 27rpx;
		background-color: #FFF;
		color: #333333;
	}

	.col-black {
		color: #000;
	}

	.col-white {
		color: #FFF;
	}

	.base {
		&_nav {
			position: fixed;
			padding: 0 36rpx;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9999;
			display: grid;
			grid-template-columns: 30% 40% 30%;
			line-height: 44px;
			color: #FFF;

			.back-icon {
				width: 18rpx;
				height: 29rpx;
			}
		}

		&_swiper {
			position: relative;
			margin-bottom: -60rpx;

			.icon-600 {
				width: 750rpx;
				height: 600rpx;
			}

			&_page {
				font-size: 24rpx;
				color: #FFF;
				background-color: rgba(0, 0, 0, 0.5);
				padding: 0 15rpx;
				border-radius: 17rpx;
				position: absolute;
				right: 27rpx;
				bottom: 75rpx;
			}
		}

		&_info {
			padding: 30rpx 27rpx 25rpx;
			background-color: #FFF;
			border-radius: 40rpx 40rpx 0 0;
			font-size: 24rpx;
			color: #999;
			margin-bottom: 20rpx;
			position: relative;

			&_name {
				font-size: 32rpx;
				color: #1A1A1A;
			}

			.wrap {
				margin: 30rpx 0;
			}

			.icon-18 {
				width: 18rpx;
				height: 24rpx;
				margin-left: 16rpx;
			}
		}

		&_detail {
			&_tab {
				padding: 0 13rpx;
				font-size: 27rpx;
				padding-bottom: 30rpx;

				.nav-act {
					font-size: 32rpx;
					color: #2E80FE;
					margin-bottom: -16rpx;
				}

				.icon-act {
					width: 33%;
					height: 15rpx;
				}
			}

			&_img {
				width: 696rpx;
				height: 333rpx;
			}
		}

		&_class {
			border-bottom: 1rpx solid #F0F0F0;
			padding: 40rpx 0 15rpx;

			&_img {
				width: 200rpx;
				height: 160rpx;
				border-radius: 20rpx;
				margin-right: 16rpx;
				background-color: #F7F7F7;
			}

			&_name {
				font-size: 29rpx;
			}

			&_info {
				font-size: 21rpx;
			}

			.wrap {
				margin-top: 10rpx;
			}

			button::after {
				border: none;
			}

			&_btn {
				margin: 0;
				padding: 0;
				border-radius: 25rpx;
				background-color: #E8F4FF;
				color: #2E80FE;
				font-size: 24rpx;
				padding: 0 20rpx;
				line-height: 50rpx;
			}
		}

		&_class:last-child {
			border-bottom: none;
		}

		.mb-30 {
			margin-bottom: 30rpx;
			flex-wrap: wrap;
		}

		.icon-340 {
			width: 340rpx;
			height: 367rpx;
			border-radius: 20rpx;
			background-color: #F7F7F7;
			margin-top: 20rpx;
		}
	}
</style>